<script setup lang="ts">
// 点击编辑
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {getCurrentUser} from "../services/user.ts";

/*const user = {
  "id": 1,
  "userAccount": 'zhangyb',
  "userName": '张永波',
  "userPhone": '13488111463',
  "gender": '男',
  "avatarUrl": 'https://pic.imeitou.com/uploads/allimg/211029/3-2110291A345R6.jpg',
  "createTime": new Date(),
};*/


// 路由跳转修改页
const router = useRouter();

const user = ref();

onMounted(async () => {
  user.value = await getCurrentUser();
})

const doEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey: editKey,
      editName: editName,
      currentValue: currentValue,
    }
  })
}

const doLogout = () => {
  myAxios.post('/user/loginOut').then(() => {
    router.replace('/user/login');
    localStorage.removeItem('currentUser');
    // 在跳转之后立即刷新页面
    window.location.reload();
  })
}


</script>

<template>
  <template v-if="user">
    <van-cell title="账户" :value="user.userAccount"/>
    <van-cell title="用户名" is-link :value="user.userName" @click="doEdit('userName', '用户名', user.userName)"/>
    <van-cell title="头像" is-link @click="doEdit('avatarUrl', '头像', user.avatarUrl)">
      <img style="height: 45px" :src="user.avatarUrl" alt="用户头像">
    </van-cell>
    <van-cell title="电话" is-link :value="user.userPhone" @click="doEdit('userPhone', '电话', user.userPhone)"/>
    <van-cell title="性别" is-link :value="user.gender" @click="doEdit('gender', '性别', user.gender)"/>
    <van-cell title="注册时间" :value="user.createTime"/>
    <van-cell title="我的队伍" is-link to="/user/team" />
    <van-button style="margin-top: 50px"  round block type="primary" color="#7232dd"   @click="doLogout()">
      退出登录
    </van-button>
<!--   <van-button style="margin: 30px 10px 10px 10px" color="#7232dd"  type="primary" block @click="doLogout()">退出登录</van-button>-->
  </template>
</template>

<style scoped>

</style>